extends ../layouts/basic

block variablesLang
    include ./_variablesLang.jade

block extra_head
    <title>Cheat Sheet - Apache ECharts (incubating)</title>

block content
    nav(class='navbar navbar-default navbar-fixed-top', role="navigation")
        include ./nav

    .page-info
        h1 Cheat Sheet - Apache ECharts (incubating)
        p Learn the component names quickly.

    .page-content.container.page-cheatsheet
        h2 Frequently-used Components
        #cheat-chart-container
            .row
                .col-lg-9
                    #cheat-chart
                .col-lg-3
                    #cheat-detail

        h2 Series
        ul
            each names, key in charts
                li.cheat-chart-item
                    a(href="option.html#series-#{key}", target="_blank")
                        img(src="#{cdnRoot}/#{ecWWWLang}/images/builder/chart/#{key}.svg", alt="")
                        <h5><div>#{names[1]}</div></h5>

        h2 Coordinates
        ul
            each names, key in coords
                li.cheat-chart-item
                    - var url = key == 'gridSimple' ? 'grid' : key;
                    a(href="option.html##{url}", target="_blank")
                        img(src="#{cdnRoot}/#{ecWWWLang}/images/builder/component/#{key}.svg", alt="")
                        <h5><div>#{names[1]}</div></h5>

        h2 Components
        ul
            each names, key in components
                li.cheat-chart-item
                    if key == 'markPoint' || key == 'markLine' || key == 'markArea'
                        - var url = 'series-line.' + key
                    else
                        - var url = key
                    a(href="option.html##{url}", target="_blank")
                        img(src="#{cdnRoot}/#{ecWWWLang}/images/builder/component/#{key}.svg", alt="")
                        <h5><div>#{names[1]}</div></h5>


block extra_js
    script(type='text/javascript').
        document.getElementById('nav-doc').className = 'active';

    script(src='#{cdnRoot}/#{ecWWWLang}/vendors/echarts/echarts-20190709.min.js')
    script(src='#{cdnRoot}/#{ecWWWLang}/js/cheat-sheet-en.js')
